<template>
  <div class="layer p-3 gap-3">

    <div class="section">
      <div class="form-item-inline gap-4">
        <div class="p-4 bg-gray-200 rounded-full">
          <div class="icon-4xl i-mdi-store"></div>
        </div>
        <div class="p-2 w-full center flex-col gap-2 b-2 b-dashed b-gray-400 rounded-lg">
          <div class="icon-2xl i-mdi-add"></div>
          <div class="title-sm desc">添加店铺头像</div>
        </div>
      </div>
    </div>

    <div class="section">

      <xoFormInput label="店铺名称" placeholder="(必填项)" />
      <xoFormInput label="店铺地址" placeholder="(必填项)" />
      <xoFormInput label="店铺联系人" placeholder="(必填项)" />
      <xoFormInput label="联系人手机号" placeholder="(必填项)" />

      <checkbox class="mt-3 form-item-inline gap-1" :checked="agree">
        <div class="form-item-inline gap-1">
          <div>阅读并同意</div>
          <div class="cursor-pointer title-sm text-emerald-5">《用户注册协议》</div>
          <div>和</div>
          <div class="cursor-pointer title-sm text-emerald-5">《隐私政策》</div>
        </div>
      </checkbox>

    </div>

    <div class="section">
      <div class="btn-primary" @click="handleClickRegister">注册</div>
    </div>

  </div>
</template>

<script setup lang='ts'>

import { ref } from 'vue';
import xoFormInput from '@/components/xoUI/xoFormInput.vue';
import useLogin from '@/hooks/useLogin'

const { register } = useLogin()

const agree = ref(false)

const handleClickRegister = () => {
  register()
}

</script>

<style></style>